import 'package:flutter/material.dart';
import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../commont/button.dart';
import '../../commont/kcontainer.dart';
import '../../tool/assets.dart';

class QBSettingView extends GetView<GetxGlobalController> {
  Widget slider(VolumeModel model, {void Function(double)? onChanged, void Function(double)? onChangedForSend}) {
    return Stack(
      children: [
        Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Text(model.name, style: const TextStyle(fontSize: 18), textAlign: TextAlign.center)),
        Positioned(
            top: 24,
            left: 20,
            right: 55,
            height: 18,
            child: kSlider(
                value: model.db.toDouble(),
                min: model.min_db.toDouble(),
                max: model.max_db.toDouble(),
                onChanged: onChanged,
                onChangedForSend: onChangedForSend)),
        Positioned(
          top: 24,
          right: 18,
          height: 18,
          width: 30,
          child: Center(
            child: kMyTextButton(name: '${model.db}'),
          ),
        ),
        const Positioned(
            top: 24,
            right: 0,
            width: 18,
            height: 16,
            child: Text('dB', style: TextStyle(fontSize: 12), textAlign: TextAlign.center)),
        const Positioned(
            top: 45,
            left: 20,
            width: 40,
            height: 20,
            child: Text('OFF', style: TextStyle(fontSize: 13), textAlign: TextAlign.left)),
        const Positioned(
            top: 45,
            right: 60,
            width: 30,
            height: 20,
            child: Text('MAX', style: TextStyle(fontSize: 13), textAlign: TextAlign.right)),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final model = controller.rxModel.value;
      return kContainer(
        child: Column(
          children: [
            Flexible(
              child: Stack(
                children: [
                  Positioned(
                    top: 10,
                    left: 10,
                    width: 60,
                    height: 26,
                    child: kMyIconButton(
                      name: model.mute ? assets.mute_off : assets.mute_on,
                      onClick: (p) => controller.updateMUTEALL(),
                    ),
                  )
                ],
              ),
            ),
            Flexible(
              child: Container(
                padding: const EdgeInsets.only(left: 30, right: 20),
                child: slider(
                  model.master_lv!,
                  onChanged: (p0) => controller.updateDBALL(p0),
                  onChangedForSend: (p0) => controller.updateDBALL(p0, isSend: true),
                ),
              ),
            ),
            const SizedBox(height: 20),
            Flexible(
                child: Container(
              padding: const EdgeInsets.only(left: 30, right: 20),
              child: slider(
                globalModel.sub_lv!,
                onChanged: (p0) => controller.updateDBLast(p0),
                onChangedForSend: (p0) => controller.updateDBLast(p0, isSend: true),
              ),
            )),
            const SizedBox(height: 20),
          ],
        ),
      );
    });
  }
}
